<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='../assets/mapbox-gl-dev.js'></script>
    <link href='../assets/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<div id='map'></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-100.486052, 37.830348],
        zoom: 2
    });

    map.on('load', function () {
        map.addSource("states", {
            "type": "geojson",
            "data": "/mapbox-lg-demo/assets/ne_110m_admin_1_states_provinces.geojson"
        });

        map.addLayer({
            "id": "state-fills",
            "type": "fill",
            "source": "states",
            "layout": {},
            "paint": {
                "fill-color": "#627BC1",
                "fill-opacity": 0.5
            }
        });

        map.addLayer({
            "id": "state-borders",
            "type": "line",
            "source": "states",
            "layout": {},
            "paint": {
                "line-color": "#627BC1",
                "line-width": 2
            }
        });

        map.addLayer({
            "id": "state-fills-hover",
            "type": "fill",
            "source": "states",
            "layout": {},
            "paint": {
                "fill-color": "#627BC1",
                "fill-opacity": 1
            },
            // "filter": ["==", "name", ""]
        });

        // When the user moves their mouse over the states-fill layer, we'll update the filter in
        // the state-fills-hover layer to only show the matching state, thus making a hover effect.
        map.on("mousemove", "state-fills", function (e) {
            //map.setFilter("state-fills-hover", ["==", "name", e.features[0].properties.name]);
            map.setFilter("state-fills-hover", ["==", "name_alt", e.features[0].properties.name_alt]);
        });

        // Reset the state-fills-hover layer's filter when the mouse leaves the layer.
        map.on("mouseleave", "state-fills", function () {
            map.setFilter("state-fills-hover", ["==", "name", ""]);
        });
    });
</script>

</body>
</html>